<template>
  <div id="evaluate">
      <div class="bt">&nbsp;/&nbsp;所有&nbsp;/&nbsp;商品列表&nbsp;/&nbsp;商品评价</div>
      <div class="main">
        <table>
              <tr>
                  <td rowspan="4" width="270px"><img :src="fooddata.img_url" alt="" width="250px" height="300px;" style="border-radius: 20px;"></td>
                  <td width="110px" class="title">商品名称:</td>
                  <td width="600px" height="40px" style="font:bold 20px/40px '仿宋';color:#cc0000">{{ fooddata.title}}</td>
              </tr>
              <tr>
                  <td class="title">商品评价:</td>
                  <td width="600px" height="80px" class="star">
                      <my-star style="margin-top: -3px;"></my-star>
                  </td>
              </tr>
              <tr>
                  <td class="title">简&nbsp;&nbsp;&nbsp;&nbsp;述:</td>
                  <td width="600px" height="80px">
                    <textarea v-model="content" id="" style="height: 80px;resize: none;width: 380px"></textarea>
                  </td>
              </tr>
              <tr>
                  <td class="title" height="100px"><vue-core-image-upload
                          :class="['btn', 'btn-primary']"
                          :crop="false"
                          @imageuploaded="imageuploaded"
                          :data="imgdata"
                          :max-file-size="5242880"
                          url="./editupload" 
                          text="">图片上传</vue-core-image-upload></td>
                  <td v-html="info" class="content"></td>

              </tr>
              <tr>
                  <td colspan="3"><button class="put_evaluate" @click="put_evaluate">提交评价</button></td>
              </tr>
        </table>
        <div class="pic_dig"></div>
      </div>
   </div>
</template>

<script>
//评价星星组件
import star from '../Public/star.vue'
import VueCoreImageUpload  from 'vue-core-image-upload'
import zoom from '../Public/zooming.min.js'
export default {
  data () { 
    return {
        fooddata:[],
        content: '',
        menus:[
          'image'
        ],
        evaluate:{
          img_url:''
        },
        imgdata: {
          src: ''
        },
        info:''
    }
  },
  created: function () {
    var uid = this.$cookie.get('uid');
    if(uid == ''){
        window.location.href="./";
    }
    this.get_food_data(this.$route.params.fid);
  },
  components: {
    'myStar':star,
    'vue-core-image-upload': VueCoreImageUpload
  },
  methods: {
    get_food_data(fid){
        this.$http({
            method:'GET',
            url:'http://123.56.86.203/fooddetail?fid='+fid,
        }).then(function(info){
          var data=info.data;
        if(data.status == 0){
          this.fooddata =data.info;
          
        }else{
          alert('数据已被删除');
          window.location.href="/";
        }
        },function(error){
              console.log(error);
        })
    },
    put_evaluate(){
        let assess=0;
        for(var i=1;i<$('.star span').length;i++){
            if($('.star span').eq(i).css('color') == 'rgb(255, 215, 0)'){
               assess +=1;
            }
        }
        this.evaluate.assess=assess;
        if(this.evaluate.assess <= 0){
          alert('请选择星级!');
          return;
        }
        this.evaluate.content=this.content;
        if(this.evaluate.content == undefined ){
          alert('请输入您的贵评!');
          return;
        }else if(this.evaluate.content.length > 220){
          alert('亲，您的评论过长！');
          return;
        }
        this.evaluate.uid=this.$cookie.get('uid');
        this.evaluate.fid=this.$route.params.fid;
        this.$http.post("http://123.56.86.203/evaluate/insert",
          {
              'evaluate':this.evaluate
          },
          {emulateJSON:true}
        ).then(response=>{
            var data=response.data;
            if(data.status == 0){
                alert('提交评价成功');
                window.location.href="/";
            }else{
                alert(data.info);
            }
        })
    },
      imageuploaded(res) {
        if(res.code == 0){
          this.info += '<img src=http://123.56.86.203/edit_upload/'+res.filename+' style="width:60px;height:60px;margin-right:10px" data-action="zoom">';
          this.evaluate.img_url += '<img src=http://123.56.86.203/edit_upload/'+res.filename+' data-action="zoom">'+',';
        }else{
          alert('上传失败');
        }
    }
  }
}
</script>

<style scoped>

#evaluate{
  width:1000px;
  margin:0 auto;
}
.bt{
   width: 100%;
  height: 25px;
  font:13px/25px '微软雅黑';
}
.main{
  padding: 20px 2%;
  width: 96%;
  margin-top:5px;
  background-color: rgba(255,255,255,0.8);
}
.main .title{
  color:#666;
  font:14px/24px '微软雅黑';
}
.put_evaluate{
  width: 25%;
  height: 40px;
  margin-left: 48%;
  margin-top:10px;
  color:#fff;
  border:1px solid #01AAED;
  background-color: #01AAED;
}
.btn{
  width: 90px;
  height: 35px;
  text-align: center;
  color:#fff;
  border:1px solid #01AAED;
  background-color: #01AAED;
  font:15px/35px '微软雅黑';
}
@media (max-width: 800px) {
      .content {
      max-width: 100%;
      margin: 20px;
      }
 }
</style>
